<template>
    <div id="app">
        <div class="app" > 
            <div class="appdiv"  v-for="app in APP" :key="app.img" >

          <!-- <p>
              {{index}}
          </p> -->
                <p class="imgp">
                    <img :src="app.img" alt="">
                </p>
                <p class="topp">
                    <span>{{app.theme}}</span>
                </p>
                <p class="bottp">
                    <span>{{app.people}}</span><span>人参与</span>| 
                    <span>{{app.people}}</span><span>人围观</span>
                </p>
             </div>
              <!-- <div class="appdiv">          
                <p class="imgp">
                    <img src="../../public/img/2.jpg" alt="">
                </p>
                <p class="topp">
                    <span>德云社最值得</span>
                </p>
                <p class="bottp">
                    <span>2235</span><span>人参与</span>| 
                    <span>1222</span><span>人围观</span>
                </p>
             </div> -->
        </div>
        
    </div>
</template>

<script>
import axios from "axios"

export default {
    
    name:"Sbanner",
    data(){
        return{
            APP:[]
        }
    },
        created(){



            // let http = new XMLHttpRequest();
            //             http.open("get", " http://localhost:3000/hot");
            //             http.send();
            //             http.onreadystatechange = () => {
            //             if (http.readyState === 4) {
            //                 this.List = JSON.parse(http.responseText);
            //                 console.log( this.List)
            //             }
            //             };



            axios({
                // url: "/List",
                                url: "/APP",

                params: {
                    // type: "hot"
                }
            })
                .then(res => (this.APP = res.data));
                console.log("this.APP.length", this.APP);

    }




}
</script>

<style scoped>
#app{
    margin-top: 0.2rem;
    width: 100%;
        /* margin: 0ren 5%; */
        overflow-x: auto;
        height: auto;
        /* flex: 1; */

}
.app{
    /* margin-top: 0.1rem; */
    height: 1.8rem;;
    width: 350%;
    display: flex;
    justify-content: space-around;
    margin-left: 2%;
    background-color: #eee;

}
.appdiv{
    margin-top: 0.1rem;
    float: left;
    width:2rem;
    /* height: 1rem; */
    display: flex;
    flex-direction: column;
    /* margin: 0rem 0.1rem; */
}
.appdiv .imgp{

height: 1.2rem;
width: 1.5rem;
}
.appdiv .imgp img{
 width: 100%;
  height: 100%;
  object-fit: cover

}

</style>
